<template>
  <div class="all">
    <div class="jubaoList">
      <el-select v-model="condition.status" placeholder="请选择">
          <el-option label="待处理" :value="0"></el-option>
           <el-option label="已处理" :value="1"></el-option>
        </el-select>
       <!-- <el-button type="primary" @click="query">查询</el-button> -->
    </div>
    <el-table :data="list">
      <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
      <el-table-column align="center" prop="roomId" label="房间Id"></el-table-column>
      <el-table-column align="center" prop="type" label="举报类型"></el-table-column>
      <el-table-column align="center" prop="info" label="举报原因"></el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <i v-if="scope.row.status==0">待处理</i>
          <i v-else>已处理</i>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="addTime" label="举报时间"></el-table-column>
      <el-table-column align="center" label="操作" v-if="condition.status==0">
        <template slot-scope="scope" v-if="scope.row.status==0">
          <el-button type="success" size="small" @click="handle(scope.row.id)">已处理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="Page">
          <el-pagination
          background
          hide-on-single-page
            @current-change="handleCurrentChange"
            :current-page="condition.pageNum"
            :page-size="condition.pageSize"
            layout="total,prev, pager, next, jumper"
            :total="condition.total">
          </el-pagination>

    </div>
  </div>
</template>

<script>
  import {jubaoList,jubaoDeal} from '@/utils/API'
  import Cookies from 'js-cookie'
  export default{
       inject:["reload"],
    data(){
      return{
        list:[],
        condition:{
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token'),
          pageNum:1,
          pageSize:15,
          status:0,
          total:0
        }
      }
    },
    methods:{
      //获取列表
      postList(){
        jubaoList(this.condition).then(res=>{
          this.list=res.data.list
          this.condition.total=res.data.total
        })
      },
      //查询
      query(){
        this.condition.pageNum=1
        this.postList()
      },
      //处理
      handle(e){
        const data={
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token'),
          id:e
        }
        jubaoDeal(data).then(res=>{
          if(res.code==0){
            this.$message.success('操作成功')
            this.reload()
          }
        })
      },
      //翻页
      handleCurrentChange(val){
        this.condition.pageNum=val
        this.postList()
      }
    },
    mounted() {
      this.postList()
    },
    watch:{
      'condition.status':{
             handler(val, oldVal){
                    this.condition.pageNum=1
                    this.postList()
                  },
             deep:true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .Page{margin: auto;}
  .jubaoList{margin: 15px 10px;
    }

</style>
